<template>
  <div class="bg-white w-full border-b absolute top-0 z-10 border-gray-200 px-4 py-2 flex items-center justify-between">
    <!-- 左侧：项目信息 -->
    <div class="flex items-center space-x-4">
      <div class="flex items-center space-x-2">
        <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
          </svg>
        </div>
        <div>
          <h1 class="text-lg font-semibold text-gray-900">{{ projectName }}</h1>
          <p class="text-sm text-gray-500">最后保存: {{ lastSaved }}</p>
        </div>
      </div>
    </div>

    <!-- 中间：主要工具 -->
    <div class="flex items-center space-x-2">
      <!-- 撤销/重做 -->
      <div class="flex items-center space-x-1 bg-gray-100 rounded-md p-1">
        <button 
          @click="undo"
          :disabled="!canUndo"
          :class="[
            'px-2 py-1 text-xs rounded transition-colors',
            canUndo 
              ? 'bg-white text-gray-700 hover:bg-gray-50' 
              : 'text-gray-400 cursor-not-allowed'
          ]"
          title="撤销 (Ctrl+Z)"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
          </svg>
        </button>
        <button 
          @click="redo"
          :disabled="!canRedo"
          :class="[
            'px-2 py-1 text-xs rounded transition-colors',
            canRedo 
              ? 'bg-white text-gray-700 hover:bg-gray-50' 
              : 'text-gray-400 cursor-not-allowed'
          ]"
          title="重做 (Ctrl+Y)"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10h-10a8 8 0 00-8 8v2M21 10l-6 6m6-6l-6-6"></path>
          </svg>
        </button>
      </div>

      <!-- 分隔线 -->
      <div class="w-px h-6 bg-gray-300"></div>

      <!-- 导入图纸 -->
      <button 
        @click="importDrawing"
        class="px-3 py-1.5 bg-green-500 text-white rounded-md text-sm font-medium hover:bg-green-600 transition-colors flex items-center"
        title="导入图纸"
      >
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
        </svg>
        导入图纸
      </button>

      <!-- 保存 -->
      <button 
        @click="saveProject"
        class="px-3 py-1.5 bg-blue-500 text-white rounded-md text-sm font-medium hover:bg-blue-600 transition-colors flex items-center"
        title="保存项目 (Ctrl+S)"
      >
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path>
        </svg>
        保存
      </button>

      <!-- 导出 -->
      <button 
        @click="exportProject"
        class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-200 transition-colors flex items-center"
        title="导出项目"
      >
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
        </svg>
        导出
      </button>

      <!-- 预览 -->
      <button 
        @click="previewProject"
        class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md text-sm font-medium hover:bg-gray-200 transition-colors flex items-center"
        title="预览项目"
      >
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
        </svg>
        预览
      </button>
    </div>

    <!-- 右侧：视图控制 -->
    <div class="flex items-center space-x-2">
      <!-- 重置视图 -->
      <button 
        @click="resetView"
        class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
        title="重置视图"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
        </svg>
      </button>

      <!-- 全屏 -->
      <button 
        @click="toggleFullscreen"
        class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md transition-colors"
        title="全屏"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
        </svg>
      </button>

      <!-- 缩放控制 -->
      <div class="flex items-center space-x-1 bg-gray-100 rounded-md p-1">
        <button class="px-2 py-1 text-xs bg-white text-gray-700 rounded shadow-sm">{{ zoomLevel }}%</button>
        <button 
          @click="zoomOut"
          class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700"
          title="缩小 (Ctrl+-)"
        >-</button>
        <button 
          @click="zoomIn"
          class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700"
          title="放大 (Ctrl+=)"
        >+</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { onMounted, onUnmounted } from 'vue'
import { useProjectStore, useHistoryStore, useViewportStore, useCanvasStore } from '@/stores'

// Pinia Stores
const projectStore = useProjectStore()
const historyStore = useHistoryStore()
const viewportStore = useViewportStore()
const canvasStore = useCanvasStore()

// 计算属性 - 从Pinia获取数据
const projectName = computed(() => projectStore.projectName)
const lastSaved = computed(() => {
  const updatedAt = projectStore.project.updatedAt
  if (!updatedAt) return '未保存'
  
  const now = new Date()
  const saved = new Date(updatedAt)
  const diff = Math.floor((now - saved) / 1000 / 60) // 分钟差
  
  if (diff < 1) return '刚刚'
  if (diff < 60) return `${diff}分钟前`
  if (diff < 1440) return `${Math.floor(diff / 60)}小时前`
  return `${Math.floor(diff / 1440)}天前`
})

const zoomLevel = computed(() => viewportStore.zoomPercentage)
const canUndo = computed(() => historyStore.canUndo)
const canRedo = computed(() => historyStore.canRedo)

// 方法
const undo = () => {
  if (canUndo.value) {
    historyStore.undo()
    console.log('撤销操作')
  }
}

const redo = () => {
  if (canRedo.value) {
    historyStore.redo()
    console.log('重做操作')
  }
}

// 导入图纸
const importDrawing = async () => {
  try {
    console.log('开始导入图纸...')
    
    // 使用图纸导入composable，传递canvas引用
    const { useDrawingImport } = await import('@/composables/design/useDrawingImport.js')
    const drawingImport = useDrawingImport(canvasStore.canvasElement)
    
    // 导入图纸
    const result = await drawingImport.importDrawing({
      multiple: false
    })
    
    if (result.success) {
      console.log('图纸导入成功:', result.message)
      // 这里可以显示成功提示给用户
    } else {
      console.error('图纸导入失败:', result.error)
      // 这里可以显示错误提示给用户
    }
    
  } catch (error) {
    console.error('导入图纸时发生错误:', error)
    // 这里可以显示错误提示给用户
  }
}

const saveProject = async () => {
  try {
    await projectStore.saveProject()
    console.log('保存项目成功')
  } catch (error) {
    console.error('保存项目失败:', error)
  }
}

const exportProject = async () => {
  try {
    const exportData = await projectStore.exportProject()
    console.log('导出项目:', exportData)
    // TODO: 处理导出数据
  } catch (error) {
    console.error('导出项目失败:', error)
  }
}

const previewProject = () => {
  console.log('预览项目')
  // TODO: 实现预览逻辑
}

const resetView = () => {
  viewportStore.resetViewport()
  console.log('重置视图')
}

const toggleFullscreen = () => {
  console.log('切换全屏')
  // TODO: 实现全屏切换
}

const zoomIn = () => {
  viewportStore.zoomIn()
  console.log('放大:', zoomLevel.value)
}

const zoomOut = () => {
  viewportStore.zoomOut()
  console.log('缩小:', zoomLevel.value)
}

// 键盘快捷键
const handleKeydown = (event) => {
  if (event.ctrlKey) {
    switch (event.key) {
      case 'z':
        event.preventDefault()
        undo()
        break
      case 'y':
        event.preventDefault()
        redo()
        break
      case 's':
        event.preventDefault()
        saveProject()
        break
      case '=':
      case '+':
        event.preventDefault()
        zoomIn()
        break
      case '-':
        event.preventDefault()
        zoomOut()
        break
    }
  }
}

// 监听键盘事件
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)
})
</script>

<style scoped>
/* 工具栏样式 */
</style>
